<script setup lang="ts">
import AuthBar from '@/components/authBar/index.vue';
</script>

<template>
  <view class="doctor-detail flex-col">
    <AuthBar />
    <view class="flex-1 overflow-auto px-48 pb-40">
      <view class="page-content mt-32">
        <view class="page-title">
          医生信息查询结果
        </view>
        <view class="page-subtitle mt-37">
          主任医师 · 内科
        </view>
        <view class="doctor-avatar">
          <image class="h-full w-full" mode="aspectFill" src="http://192.168.1.3:9010/readme/测试图片.png" />
        </view>
        <view class="page-cell__group">
          <view class="page-cell">
            <view class="page-cell__label">
              专长:
            </view>
            <view class="page-cell__value">
              心血管疾病
            </view>
          </view>

          <view class="page-cell">
            <view class="page-cell__label">
              挂号费:
            </view>
            <view class="page-cell__value">
              ￥80.00
            </view>
          </view>

          <view class="page-cell">
            <view class="page-cell__label">
              出诊时间:
            </view>
            <view class="page-cell__value">
              周一、周三上午8:00-12:00
            </view>
          </view>

          <view class="page-cell">
            <view class="page-cell__label">
              教育背景:
            </view>
            <view class="page-cell__value">
              xxxxxx医学院，内科学硕士
            </view>
          </view>

          <view class="page-cell">
            <view class="page-cell__label">
              工作经验:
            </view>
            <view class="page-cell__value">
              10年临床经验，曾任职三甲医院内科
            </view>
          </view>

          <view class="page-cell">
            <view class="page-cell__label">
              出诊地点:
            </view>
            <view class="page-cell__value">
              门诊楼3楼内科诊室
            </view>
          </view>

          <view class="page-cell">
            <view class="page-cell__label">
              医生简介:
            </view>
            <view class="page-cell__value">
              专注于慢性病管理，注重患者教育与健康管理。
            </view>
          </view>

          <view class="page-cell">
            <view class="page-cell__label">
              预约方式:
            </view>
            <view class="page-cell__value">
              支持在线预约、自助终端机预约
            </view>
          </view>

          <view class="page-cell">
            <view class="page-cell__label">
              评价/评分:
            </view>
            <view class="page-cell__value">
              4.8分
            </view>
          </view>

          <view class="page-cell">
            <view class="page-cell__label">
              服务时间:
            </view>
            <view class="page-cell__value">
              全年无休，节假日正常坐诊
            </view>
          </view>

          <view class="page-cell">
            <view class="page-cell__label">
              出诊类型:
            </view>
            <view class="page-cell__value">
              门诊、急诊
            </view>
          </view>

          <view class="page-cell">
            <view class="page-cell__label">
              擅长疾病:
            </view>
            <view class="page-cell__value">
              高血压、糖尿病、消化性溃疡等
            </view>
          </view>

          <view class="page-cell">
            <view class="page-cell__label">
              科研/学术成果:
            </view>
            <view class="page-cell__value">
              《慢性病管理新策略》等
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '医生信息',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.doctor-detail {
  height: 100%;
  background-color: var(--bg-color);
}

.page-content {
  border: 2px solid #e6effd;
  background: #d8e7ff;
  border-radius: 20px;
  padding: 40px 52px;
  position: relative;
}

.doctor-avatar {
  width: 245px;
  height: 266px;
  border-radius: 20px;
  overflow: hidden;
  position: absolute;
  top: 49px;
  right: 45px;
}

.page-title {
  font-size: 48px;
  font-weight: bold;
  color: var(--text-color);
}

.page-subtitle {
  font-weight: 500;
  font-size: 32px;
  color: var(--text-color);
}

.page-cell {
  @apply flex  items-start;
  font-size: 32px;
  margin-top: 34px;
  .page-cell__label {
    color: var(--secondary-text-color);
    flex-shrink: 0;
  }

  .page-cell__value {
    color: var(--text-color);
    margin-left: 12px;
    flex: 1;
  }
}
</style>
